<template>
  <yfu-dialog ref="roleManagerPermissionsDialog" :dialogParam="dialogParam" v-on:dialogOpenBefore="dialogOpenBefore" v-on:dialogCloseBefore="dialogCloseBefore">
    <div style="height:450px">
      <div style="float:left;width:50%;height:100%;">
        <el-tabs v-model="activeName">
          <el-tab-pane label="用户查找" name="first">
            <div>
              <yfu-table :param="tableparam" v-on:getCheckedRows="getRows" ref="demoTable"></yfu-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="组织查找" name="second">
            <div>
              <yfu-tree :param="param"  v-on:nodeClick="nodeClick" ref="yfuTreeDiv"> </yfu-tree>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style=" float: left; margin-left: 20px; vertical-align: middle;width:20px;margin-top:160px;">
        <el-button size="mini" type="success" plain @click="toRight"><i class="el-icon-arrow-right" ></i></el-button><br/>
        <el-button size="mini" type="danger" plain @click="toLeft"><i class="el-icon-arrow-left" ></i></el-button>
      </div>
      <div style="float:left;width:30%;height:100%;margin-left:40px">
        <yfu-listcheckboxpanel :listCheckBoxPanelParam="listCheckBoxPanelParam" ref="yfuListCheckBoxPanelDemo">
        </yfu-listcheckboxpanel>
      </div>
    </div>
  </yfu-dialog>
</template>
<style>
</style>
<script>
  import { organizationTreeApi1, getUserInfoListByOrganizationId } from '@/view/api/organization.js'
  import { addRoleUser } from '@/view/api/roleManager.js'
  import {yfuErrorToast} from '@/utils/yfuMessage.js'
  export default {
    methods: {
      openDialog (row) {
        this.listCheckBoxPanelParam.urlParam.roleId = row.id
        this.$refs.roleManagerPermissionsDialog.openDialog()
        if (this.$refs.yfuListCheckBoxPanelDemo != null) {
          this.$refs.yfuListCheckBoxPanelDemo.getData()
        }
      },
      // DIALOG 打开时执行方法
      dialogOpenBefore () {
      },
      closeDialog () {
        this.$refs.roleManagerPermissionsDialog.closeDialog()
      },
      // DIALOG 点击保存时 执行方法/同时关闭DIALOG
      dialogCloseBefore () {
        let cThis = this

        let addUserList = []
        let userIds = []
        addUserList = this.$refs.yfuListCheckBoxPanelDemo.getAllData()
        addUserList.forEach((user, index) => {
          userIds.push(user.id)
        })

        let params = {}
        params.roleId = this.listCheckBoxPanelParam.urlParam.roleId
        params.userIds = userIds.join()
        addRoleUser(params,
          function (data) {
            cThis.closeDialog()

            let row = {}
            row.id = cThis.listCheckBoxPanelParam.urlParam.roleId
            cThis.$emit('refreshRoleUserTable', row)
          },
          function (error) {
            console.log(error)
          }
        )
      },
      toRight () {
        let cThis = this

        if (this.activeName === 'first') {
          if (this.userChecks.length === 0) {
            yfuErrorToast('至少选中一行')
          } else {
            this.addItems(this.userChecks)
          }
        } else {
          if (this.organizationselected <= 0) {
            yfuErrorToast('至少选中一行')
          } else {
            let params = {}
            params.id = this.organizationselected
            params.currentPage = 1
            params.pageSize = 10000
            getUserInfoListByOrganizationId(params,
              function (data) {
                console.log(data.datas)
                cThis.addItems(data.datas)
              },
              function (error) {
                console.log(error)
              }
            )
          }
        }
      },
      toLeft () {
        this.removeItems()
      },
      // 选择列表得到选中
      getCheckedRows () {
        alert(this.$refs.yfuListCheckBoxPanelDemo.getCheckeds())
      },
      // 选择列表添加
      addItems (items) {
        let selectedItems = []
        items.forEach((item, index) => {
          selectedItems.push({
            id: item.id,
            userName: item.userName,
            trueName: item.trueName
          })
        })
        this.$refs.yfuListCheckBoxPanelDemo.addItems(selectedItems)
      },
      // 选择列表删除
      removeItems () {
        this.$refs.yfuListCheckBoxPanelDemo.removeItems()
      },
      // 得到所有选中行
      getRows (row) {
        this.userChecks = row
      },
      // 刷新用户表
      refresh () {
        this.$refs.demoTable.refreshTable()
      },
      // 得到树结点所有选中
      nodeClick (data) {
        this.organizationselected = data.id
      },
      // 刷新树结点
      refreshTree () {
        this.$refs.yfuTreeDiv.refresh()
      }
    },
    data () {
      return {
        dialogParam: {
          title: '添加用户',
          width: '50%',
          showFooter: true
        },
        listCheckBoxPanelParam: {
          title: '选择列表',
          width: '100%',
          height: '450px',
          baseURL: process.env.BASE_API,
          url: '/userRole/getRoleUserList',
          urlParam: {
            roleId: undefined,
            currentPage: 1,
            pageSize: 10000
          },
          defaultSelected: 1,
          name: 'trueName',
          showSearch: true
        },
        activeName: 'first',
        tableparam: {
          showBox: true,
          baseURL: process.env.BASE_API,
          url: '/user/getUserInfoList',
          urlParam: {
            organizaitonId: 1
          },
          showSearch: true,
          searchWidth: '100%',
          searchRows: [
            {
              label: '用户名',
              value: 'userName'
            },
            {
              label: '真实姓名',
              value: 'trueName'
            }
          ],
          showOperateRow: false,
          nvsmall: true,
          nvlayout: 'pager',
          rows: [
            {
              prop: 'userName',
              label: '用户名',
              width: '100px'
            },
            {
              prop: 'trueName',
              label: '真实姓名'
            }
          ]
        },
        param: {
          showSearch: true,
          baseURL: process.env.BASE_API,
          url: organizationTreeApi1.url,
          urlParam: {
            organizationId: 1
          },
          showCheckBox: false,
          width: '100%',
          height: '400px',
          defaultProps: {
            id: 'id',
            label: 'label'
          }
        },
        userChecks: [],
        organizationselected: 0,
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
  }
</script>
